import {CommonComponentProps} from "../../../components/editor/interface.ts";
import {useMateRailDrop} from "../../hooks/useMaterialDrop.ts";
import { useEffect, useRef} from "react";
import {PageDndAccept} from "../DnDAccept.tsx";

function Page({children, id, styles,}: CommonComponentProps) {
    const PageRef = useRef<any>(null)
    const {canDrop, drop} = useMateRailDrop([...PageDndAccept], id)
    useEffect(() => {
        if (!PageRef.current) return
        drop(PageRef.current)
    }, []);
    return (
        <div
            data-component-id={id}
            className='p-[20px] h-[100%] box-border overflow-auto'
            style={{...styles, border: canDrop ? '2px solid blue' : 'none'}}
            ref={PageRef}
        >
            {children}
        </div>
    )
}

export default Page;
